import { createElement, render, renderDom } from "./element";
import diff from './diff'
import patch from "./patch";

let vertualDom1 = createElement('ul', { class: 'list' }, [
  createElement('li', { class: 'item' }, ['a']),
  createElement('li', { class: 'item' }, ['c']),
  createElement('li', { class: 'item' }, ['b']),
])

let vertualDom2 = createElement('ul', { class: 'list' }, [
  createElement('li', { class: 'item' }, ['a', '1', '2']),
  createElement('li', { class: 'item' }, ['c']),
  createElement('li', { class: 'item' }, ['b', 'test']),
  createElement('div', { class: 'item' }, ['new']),
  // createElement('div', { class: 'item' }, ['new']),
  // createElement('div', { class: 'item' }, ['new']),
])

// 平级节点位置互换，会导致重新渲染
//新增节点不会被触发

// 虚拟dom转化真实dom
let el = render(vertualDom1)
// 渲染页面
renderDom(el, window.root)

// dom diff ：两个虚拟dom的对比 -> 两个对象的对比
// 根据两个虚拟对象创建出补丁，描述改变的内容，将这个补丁用来更新dom
// 差异比较 -> 补丁
// jsx语法就是createElement，转成AST,  setState 触发 diff
let patches = diff(vertualDom1, vertualDom2)
console.log("patches=", patches);
// 给元素打补丁，重新更新视图
patch(el, patches)